<template>
  <div class="myActions page">
    <div class="main">
      <div class="header items-center bg-white sticky">
        <div
          class="item items-center justify-center"
          v-for="(item, index) in types"
          :key="index"
          :class="{ select: item.value == currentType }"
          @tap="changeType(item)"
        >
          <div class="select-item">
            <span class="name">{{ item.name }}</span>
            <span class="line" v-if="item.value === currentType"></span>
          </div>
        </div>
      </div>
      <div class="list flex-col">
        <div
          v-for="(item, index) in data"
          :key="index"
          class="order-item flex-col bg-white"
        >
          <div class="title items-center">
            <img :src="item.storeLogo" alt="" class="logo" />
            <span class="store-name"
              >{{ item.storeName }}
              <img
                src="../../static/icones/orderlist1.png"
                alt=""
                class="arrow"
            /></span>
            <span class="status">{{ item.status | changeStatus }}</span>
          </div>
          <div class="content flex" @tap="goOrderDrtail(item.id)">
            <div class="left justify-center items-center">
              <img :src="item.coverUrl" alt="" class="pic" mode="aspectFit" />
            </div>
            <div class="right flex-col">
              <p class="goods-title ellipsis_1">
                {{ item.goodsName }}
              </p>
              <span v-if="item.specName" class="spec"
                >套餐:{{ item.specName }}</span
              >
              <div class="specss">
                <span class="rang-date spec"
                  >租期:{{ item.startEndTimeString }}</span
                >
                <span class="num spec">X{{ item.num }}</span>
              </div>
            </div>
          </div>

          <div class="pingtai">
            <div class="pingtai-lf">
              <div class="lf-img">
                <img src="../../static/icones/orderlist22.png" alt="" />
              </div>
              <div class="lfserve">平台介入</div>
            </div>
            <div class="pingtai-ri">
              <div class="all-rang items-center">
                总租金:￥{{ item.allRentFee || 0 }}（{{ item.rentStage }}期）
              </div>
            </div>
          </div>
          <div class="action items-center">
            <div class="btns items-center justify-end">
              <!-- <span
              v-if="[1].includes(item.status)"
              class="btn"
              @tap.stop="phone('4000850889', 'platform')"
              >客服</span
            > -->
              <!-- <span
              v-if="[0, 3, 10, 11].includes(item.status)"
              class="btn"
              @tap.stop="phone(item.storeTelphone, 'store')"
            >联系商家</span> -->
              <!-- <span
              v-if="false"
              class="btn"
              @tap.stop="phone(item.storeTelphone, 'store')"
              >联系商家</span
            > -->
              <!-- <span
              v-if="[0].includes(item.status)"
              class="btn"
              @tap.stop="pay(item)"
              >去免押</span
            >
            <span
              v-if="[1, 2].includes(item.status)"
              class="btn"
              @tap.stop="auth(item)"
              >认证信息</span
            >
            <span
              v-if="[1].includes(item.status)"
              class="btn big"
              @tap.stop="sign(item)"
              >租赁合同签名</span
            > -->
              <view class="btn" @tap.stop="returnGoods(item)">归还</view>
              <view class="btn" @tap.stop="rerentGoods(item)">续租</view>
              <view class="btn" @tap.stop="buyoutGoods(item)">买断</view>
              <view class="btn" @tap.stop="billDetailGoods(item)"
                >账单详情</view
              >
              <view class="btn" @tap.stop="commentList(item)">去评价</view>
              <view class="btn" @tap.stop="buyoutDescriptionTap(item)"
                >买断说明</view
              >
              <!-- <span
              v-if="[4, 5].includes(item.status) && item.type !== 3"
              class="btn"
              @tap.stop="buyout(item)"
              >买断{{ item.type === 2 && item.buyoutId ? "支付" : "" }}</span
            > -->
              <!-- <navigator :url="`/pagesMy/orderBuyout/index?id=${id}&type=info`">
              <span
                v-if="[4, 5, 10, 11].includes(item.status)"
                class="btn"
                @tap.stop="payDetail(item)"
                >账单详情</span
              >
            </navigator> -->
              <!-- <span
              v-if="[1, 0].includes(item.type) && item.settlementPrice > 0"
              class="btn"
              @tap.stop="settle(item)"
              >同意结算</span
            >
            <span
              v-if="[6, 7, 8].includes(item.status)"
              class="btn"
              @tap.stop="reorder(item)"
              >再次下单</span
            > -->
              <!-- <span
              v-if="[7].includes(item.status)"
              class="btn"
              @tap.stop="addAssess(item)"
              >去评价</span
            > -->
              <!-- <span
              v-if="[1].includes(item.status) && item.isShow"
              class="btn"
              @tap.stop="faceAuth(item, index)"
              >人脸识别</span
            > -->
              <view class="btn" @tap.stop="viewShow(item, index)"
                >查看物流</view
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <NoData v-if="data.length === 0" />
  </div>
</template>

<script>
import { getActionList } from "../../config/api";
import NoData from "../../components/noData.vue";
export default {
  name: "myActions",
  components: { NoData },
  data() {
    return {
      currentType: 4,
      types: [
        { name: "租用中", value: 4 },
        { name: "待归还", value: 5 },
      ],
      data: [],
      config: {
        page: 1,
        size: 10,
        finish: false,
      },
    };
  },
  computed: {},
  mounted() {
    // const { name } = this.$query();
    // if (name) {
    //   this.$taro.setNavigationBarTitle({
    //     title: decodeURIComponent(name),
    //   });
    // }
    // this.resetData();
  },
  onPullDownRefresh() {
    this.resetData();
  },
  onReachBottom() {
    // if (!this.config.finish) {
    //   this.config.page += 1;
    // }
    this.getData();
  },
  filters: {
    changeStatus(status) {
      return {
        0: "待支付",
        1: "待审核",
        2: "待发货",
        3: "已发货",
        4: "租用中",
        5: "待归还",
        6: "已完成",
        7: "待评价",
        8: "已取消",
      }[status];
    },
  },
  methods: {
    changeType({ value }) {
      this.currentType = value;
      this.resetData();
    },
    async getData() {
      const params = {
        pageNumber: this.config.page,
        pageSize: this.config.size,
        status: this.currentType,
      };
      const res = await getActionList({
        pageNumber: 1,
        pageSize: 10,
        sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
        status: 5,
      });
      console.log(res.data?.orderInfoDTOList, "data");
      this.data.push(...res.data?.orderInfoDTOList);
      this.config.finish =
        res.data?.orderInfoDTOList?.length < this.config.size;
    },
    resetData() {
      // this.$taro.stopPullDownRefresh();
      this.config.page = 1;
      this.data = [];
      this.getData();
    },
    returnGoods({ id }) {
      OrderAction.returnGoods(id);
    },
    rerent({ id }) {
      OrderAction.rerent(id);
    },
    buyout({ id }) {
      OrderAction.buyout(id);
    },
    payDetail({ id }) {
      OrderAction.payDetail(id);
    },
    commentList({ id }) {
      uni.navigateTo({ url: `/pagesMy/commentList/index?id=${id}` });
    },
    reorder({ goodsId }) {
      OrderAction.reorder(goodsId);
    },
    returnGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderReturn/index?id=${id}` });
    },
    rerentGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderRerent/index?id=${id}` });
    },
    buyoutGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderBuyout/index?id=${id}` });
    },
    billDetailGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderBillDetail/index?id=${id}` });
    },
    buyoutDescriptionTap({ id }) {
      uni.navigateTo({ url: `/pagesMy/buyoutDescription/index?id=${id}` });
    },
    goOrderDrtail(id) {
      console.log(id, "id");
      uni.navigateTo({ url: `/pages/orderInfo/index?id=${id}` });
    },
  },
};
</script>
<style lang="scss">
.myActions {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background-color: #f5f5f5;
  .main {
    .header {
      // position: fixed;
      // top: 0;
      // left: 0;
      width: 100%;
      height: 35px;
      z-index: 1;
      padding: 0 16px;
      .item {
        flex: 1;
        position: relative;
        height: 100%;
        .select-item {
          position: relative;
          height: 100%;
          .name {
            font-size: 16px;
            line-height: 20px;
            color: #232323;
            margin-top: 7px;
          }
          .line {
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 100%;
            height: 3px;
            background: #29b5ff;
            border-radius: 2px;
          }
          &.select {
            .name {
              color: #29b5ff;
            }
          }
        }
      }
    }
    .list {
      width: 100%;
      height: 100%;
      padding: 0 12px;
      overflow: auto;
      .order-item {
        width: 100%;
        min-height: 201px;
        border-radius: 8px;
        margin-top: 7px;
        .title {
          height: 45px;
          width: 100%;
          padding: 0 15px;
          border-bottom: 1px solid #f5f5f5;
          .logo {
            width: 18px;
            height: 18px;
            border-radius: 50%;
          }
          .store-name {
            color: #3d3d3d;
            font-size: 14px;
            margin-left: 4px;
            line-height: 20px;
            .arrow {
              width: 6px;
              height: 12px;
              margin-left: 5px;
            }
          }
          .status {
            color: #0096ff;
            font-size: 14px;
            line-height: 20px;
            margin-left: auto;
          }
        }
        .content {
          padding: 10px 12.5px;
          width: 100%;
          min-height: 93px;
          .left {
            width: 125px;
            height: 93px;
            background-color: #f9f9f9;
            .pic {
              height: 80px;
              max-width: 125px;
            }
          }
          .right {
            margin-left: 8px;
            width: 217px;
            .goods-title {
              color: #333333;
              font-size: 14px;
              max-width: 210px;
              line-height: 20px;
            }
            .spec {
              color: #aaaaaa;
              font-size: 12px;
              line-height: 17px;
              margin-top: 6px;
            }
            .specss {
              display: flex;
              justify-content: space-between;
            }
            .all-rang {
              width: 210px;
              color: #333333;
              font-size: 14px;
              font-weight: bold;
              line-height: 20px;
              margin-top: 6px;
              .num {
                margin-left: auto;
              }
            }
          }
        }
        .ping-tag {
          width: 100%;
          height: 24px;
          margin-bottom: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .pingtai {
          width: 100%;
          height: 30px;
          color: #3d3d3d;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // background-color: rgb(224, 140, 140);
          .pingtai-lf {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            .lf-img {
              width: 20px;
              height: 20px;
              margin-left: 20px;
              margin-right: 3px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .action {
          padding: 20px 0;
          width: 100%;
          max-width: 100vw;
          height: 48px;
          overflow-x: scroll;
          overflow-y: hidden;
          .btns {
            width: fit-content;
            overflow-x: scroll;
            padding: 0 10px;
            min-width: 100%;
            .btn {
              width: 76px;
              height: 30px;
              line-height: 31px;
              text-align: center;
              color: #555555;
              font-size: 12px;
              border: 1px solid #e1e1e1;
              border-radius: 15px;
              margin-left: 5px;
              &.big {
                width: 104px;
              }
              &:last-child {
                background-color: #0096ff;
                color: #fff;
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
